<template>
  <div class="container">
    <el-card class="box-card" style="margin: 20px" :body-style="{padding:'20px'}">
      <div slot="header">
        <el-button style=" padding: 10px 10px" type="primary" icon="el-icon-plus" @click="addTrade">添加</el-button>
      </div>
      <el-table
        :data="trademarkList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          prop="date"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="tmName"
          label="品牌名称"
          width="180">
        </el-table-column>
        <el-table-column
          label="品牌LOGO">
          <template v-slot="{row}">
            <el-image :src="row.logoUrl" style="width: 300px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="{row}">
            <el-button size="small" style=" padding: 5px 5px" type="warning" icon="el-icon-edit-outline" @click="updateTrade(row)">修改</el-button>
            <el-popconfirm
              style="padding: 5px 5px"
              title="是否删除这个商品"
              @onConfirm="deleteTrade(row.id)"
            >
              <template #reference>
                <el-button  size="small" style=" padding: 5px 5px" type="danger" icon="el-icon-delete" >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        :pager-count="5"
        :page-count.sync="pageCount"
        :page-size="pageSize"
        layout="total, prev, pager, next,sizes"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="trademarkData.id ? '修改品牌':'添加品牌'"
      width="50%"
    >
      <el-form label-width="120px" :model="trademarkData">
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="trademarkData.tmName" ></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="http://gmall-h5-api.atguigu.cn/admin/product/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="trademarkData.logoUrl" :src="trademarkData.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpDate">确 定</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {reqAddTradeSave, reqDeleteTrade, reqPageLimit, reqUpdateTrade} from "@/api/trademark";

export default {
  name: "Trademark",
  data(){
    return{
      //品牌数据列表
      trademarkList:[],
      //每页多少条
      pageSize:5,
      //当前页
      currentPage:1,
      //总条数
      total:0,
      //总页数
      pageCount:0,
      //控制弹窗的数据
      dialogVisible:false,
      //收集添加的表单数据
      trademarkData:{
        id:"",
        tmName:"",
        logoUrl:""
      }
    }
  },
  methods:{
    async initData(){
      try {
        const result = await reqPageLimit(this.currentPage, this.pageSize)
        this.trademarkList = result?.records
        this.pageCount = result?.pages
        this.total = result?.total
      }catch (e){
        return Promise.reject(e.message)
      }
    },
    //添加弹框
    addTrade(){
      this.trademarkData ={
        id:"",
        tmName:"",
        logoUrl:"",
      }
      this.dialogVisible = true
    },
    //修改弹框
    updateTrade(row){
      this.dialogVisible = true
      this.trademarkData = {...row}
    },

    //新增还是修改的请求
    async addOrUpDate(){
      try {
        if(this.trademarkData.id){
          await reqUpdateTrade(this.trademarkData)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }else {
          await reqAddTradeSave(this.trademarkData)
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
      }catch (e){
        this.$message.error(this.trademarkData.id ? "修改失败" : "新增失败");
      }
      //关闭窗口
      this.dialogVisible = false
      //重新发送请求
      this.initData()
    },
    //删除商品列表项
    async deleteTrade(id){
      try {
        await reqDeleteTrade(id)
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.initData()
      }catch (e){
        this.$message({
          message: '删除失败',
          type: 'error'
        });
      }
    },

    //图片上传逻辑
    handleAvatarSuccess(res) {
      console.log(res)
      this.trademarkData.logoUrl = res.data
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  },
  mounted() {
    this.initData()
  },
  watch:{
    currentPage(){
      this.initData()
    },
    pageSize(){
      this.initData()
    }
  }
}
</script>

<style>
.box-card {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
